<template>
  <Popper />
  <div
    id="editor"
    contenteditable
    class="w-full h-full shadow-lg"
    v-html="info"
  ></div>
  <div>{{ info }}</div>
</template>
<script lang="ts" setup>
import Popper from "vue-popperjs";
console.log(Popper, "popper");

const info = ref("<p>111222</p>");

const getEditorAllInfo = () => document.getElementById("editor")!.innerHTML;
const syncData = (newInfo: string) => {
  info.value = newInfo;
};

setInterval(() => {
  const newInfo = getEditorAllInfo();
  if (info.value !== newInfo) {
    syncData(newInfo);
  }
}, 5000);
</script>
<style lang="scss" scoped></style>
